<template>
  <div class="home-card">
    <i
      :class="'iconfont ' + icon"
      :style="{ color: iconColor }"
    ></i>
    <div
      class="info"
      :style="{ color: iconColor }"
    >
      <h3>{{ title }}</h3>
      <p>{{ num | toThousands }}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '订单'
    },
    icon: {
      type: String,
      default: '#000'
    },
    iconColor: {
      type: String,
      default: '#000'
    },
    num: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.home-card {
  background-color: #fff;
  width: 23%;
  height: 120px;
  border-radius: 8px;
  // border: 1px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .iconfont {
    font-size: 50px;
  }
}
</style>
